<template>

    <div>
        <el-card>
            <ul>
                <li v-for="(descript, permission) in powerDescirpt" :key="permission">
                    {{permission}} : {{descript}}
                </li>
            </ul>
        </el-card>

        <el-card style="margin-top: 10px;">
            <el-table :data="roleList">
                <el-table-column prop="id" label="id" />
                <el-table-column prop="roleName" label="角色名" />
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button type="primary" :disabled="scope.row.id==='1'" @click="getRolePower(scope.row.id,scope.row.roleName),showSavePermission=true" plain>编辑</el-button>

                        <el-popconfirm title="你确定要删除吗" @confirm="delRole(scope.row.id)">
                            <template #reference>
                                <el-button type="danger" plain :disabled="scope.row.id==='1'">删除</el-button>
                            </template>
                        </el-popconfirm>
            
                    </template>
                </el-table-column>

            </el-table>     
        </el-card>
    </div>


    <el-dialog v-model="showSavePermission" width="600px" style="min-height: 440px;">

        <div style="text-align: center;">单击选择即可</div>

        <div>
            <div style="float: left;">
                拥有的权限
            </div>
            <div style="margin-left: 60%;">
                未拥有的权限
            </div>
        </div>


        <div class="left">
            <div v-for="(item,index) in rolePower?.rolePermissionList">
                <el-button type="warning" link @click="rolePower.remainPermissionList.push(item),rolePower?.rolePermissionList.splice(index,1)">{{item.powerName}}</el-button>
            </div>
        </div>

        <div class="right">
            <div v-for="(item,index) in rolePower?.remainPermissionList">
                <el-button type="info" link @click="rolePower?.rolePermissionList.push(item),rolePower.remainPermissionList.splice(index,1)">{{item.powerName}}</el-button>
            </div>
        </div>
        <div style="text-align: center;margin-top: 65%;">
            <el-button type="primary" plain @click="saveUserPermission()">保存</el-button>
        </div>
    </el-dialog>
</template>


<script setup lang="ts">
    import useRolePowerAdmin from '@/hooks/admin/useRolePowerAdmin'
    import { onMounted,ref } from 'vue';
    import useEnum from '@/base/useEnum'
    onMounted(()=>{
        getRoleList()
    })

    const {powerDescirpt} =useEnum()

    const {roleList,rolePower,showSavePermission,saveUserPermission,getRolePower,getRoleList,delRole} = useRolePowerAdmin()
</script>

<style scoped>
    .left{
        min-height:350px;
        width: 40%;
        float: left;
        border: 2px solid #f7dfdf; box-shadow: 0 4px 8px rgba(246, 239, 239, 0.2);
    }

    .right{
        min-height:350px;
        width: 40%;
        float: right;
        border: 2px solid #f7dfdf;
        box-shadow: 0 4px 8px rgba(246, 239, 239, 0.2);
    }
</style>